<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Projects</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__CSS__/projects.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />

    <style>
        .add_prj {
            /*border: 1px solid;*/
            width: 100px;
            height: 100px;
            color: #ccc;
            transition: color .25s;
            position: relative;
        }

        .add_prj::before{
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 80px;
            margin-left: -40px;
            margin-top: -5px;
            border-top: 5px solid;
        }
        .add_prj::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            height: 80px;
            margin-left: -5px;
            margin-top: -40px;
            border-left: 5px solid;
        }

    </style>

    <script>
        function addProjectJS(userId){
            //var prj_name = prompt("请输入项目名称","");

            var prj_name = $('#new_prj_name').val();
            var re = new RegExp("^[ ]+$");

            if(prj_name.length > 10){
                $('#invalid_length').show();
                return ;
            }

            if(! re.test(prj_name) && prj_name != "" && prj_name != null ) {
                $('#invalid_name').hide();

                $.post("__PUBLIC__/index/index/addProject", {name: prj_name, userId: userId}, function (data) {
                    //alert(data);
                    location.href='{:url('index/getProjects',array('userId'=>$_COOKIE['user']))}';
                    //window.location.reload();

                });
            }else {
                //alert("项目名称不能为空或空格！")
                $('#invalid_name').show();
            }
        }

        function showWindow() {
            $('#showdiv').show();  //显示弹窗
            $('#cover').css('display','block'); //显示遮罩层
            $('#cover').css('height','100%'); //设置遮罩层的高度为当前页面高度
        }

        // 关闭弹窗
        function closeWindow() {
            $('#showdiv').hide();  //隐藏弹窗
            $('#cover').css('display','none');   //隐藏遮罩层
        }
    </script>
</head>
<body>



{if condition="isset($_COOKIE['user']) "}

    <!--<button onclick="showWindow()" class="prj_add">添加项目</button>-->
<br/><br/>


<div style="margin-top:20px;border-color:#D9D9D9;position:relative;width: 258px;height: 190px;float: left;margin-left: 50px;">
   <div class="button button-border"  onclick="showWindow()"  style="border-color:#D9D9D9;padding:0;float: left;width: 100%;height: 100%;">
        <div style="position:absolute;top:1.5%;height:132px;width:98.5%;">
            <div style="position:absolute;top:10%;left: 30%;" class="add_prj"></div>
            <p style="margin-top: 45%;color: #666666;">新建小组</p>

        </div>
    </div>
</div>

    <!--该用户所在的项目展示-->
    {volist name="projects" id="prj"}
    <div style="border-color:#D9D9D9;position:relative;width: 258px;height: 190px;float: left;margin-left: 50px;margin-top: 20px;">
    <!--class="button button-glow button-border button-rounded button-primary"-->
        <div class="button button-border" id="{$prj.prj_id}" onclick="location.href='{:url('index/getTools',array('prjId'=>$prj.prj_id))}'"
             style="color:#8f8f8f;border-color:#D9D9D9;padding:0;float: left;width: 100%;height: 100%;">
            <div style="background-image:url(__IMG__/prj_display_4.png);background-size:100% 100%;position:absolute;top:1.5%;height:132px;width:98.5%;">
                <p style="margin-top: 20%;color: #101010;">{$prj.prj_name}</p>
            </div>

            <div style="position: absolute;font-size: 10px;top: 83%;left: 4%;">小组成员：{$prj.members_size}人</div>

            <div style="position: absolute;top: 83%;right:1%;font-size: 10px;">创建时间：{$prj.date}</div>
        </div>
    </div>
    {/volist}
    <!--结束-->



<!--以下为新增项目时的弹窗相关-->
<!-- 遮罩层 -->
<div id="cover" class="cover"></div>
<!-- 弹窗 -->
<div id="showdiv" class="showdiv" style="height: 250px;">
    <!-- 标题 -->
    <div class="showdiv_title" >
        创建小组
    </div>
    <!-- 内容 -->
    <div class="showdiv_prompt">
        请输入要创建的小组名称
        <input type="text" id="new_prj_name">

        <div  style="color: red;font-size: 13px;">（请不要超过10个字）</div>
        <div id="invalid_name" style="display: none;color: red;font-size: 13px;">小组名称不能为空或空格</div>
        <div id="invalid_length" style="display: none;color: red;font-size: 13px;">小组名称暂时不支持超过10个字符</div>
    </div>

    <!-- 按钮 -->
    <div class="button button-medium " onclick="closeWindow()" style="position:absolute;left: 25%;top: 80%;" >
        取消</div>
    <div id="next_step_btn" onclick="addProjectJS('{$_COOKIE['user']}')" class="button button-action button-medium " style="position:absolute;left: 50%;top: 80%;">
        确定</div>

</div>


{/if}


<script>
    $('#header_projects').css('border-bottom','solid 2px #000000');
    $('#header_projects').css('font-weight','bold');


    if(location.href.split(/[/.]/).indexOf('checklogin') != -1 || location.href.split(/[/.]/).indexOf('afterregister') != -1){
        window.location.href='{:url("index/getProjects",array('userId'=> $_COOKIE['user']))}';
    }

</script>


</body>
</html>